/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {View} from 'react-native';
import { TextareaItem, Button } from 'antd-mobile-rn';

// project
import {
    Page, Content, Text, Row, Header, Footer, Wrap, Between, Hand,TouchOpacity

} from '../../../library'

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class FeedBack extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
        super(props);
        this.Nav = this.props.navigation;

        /**
         * state
         */
		this.state = {
            // 反馈类型变量
			type:[
                {name: '功能意见'},
                {name: '使用问题'},
                {name: '性能问题'},
                {name: '其他问题'}
            ],
            // 用户手机号变量（需要隐藏中间四位）
            phone:'13165595989',
		};
    }

    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render() {
		return (
			<Page>
				
				<Content my='40' bg='#efeff4'>
                    <View style={{backgroundColor:'#fff',marginTop:10, paddingLeft:15,paddingRight:15,paddingBottom:15}}>

                        {/* 反馈类型标题 */}
                        <Row mt='10' h='30' y='center' bb='1 #f0f0f0'>
                            <Text color='#494949' size='16'>反馈类型</Text>
                        </Row>

                        {/* 类型 */}
                        <Wrap bb='1 #f0f0f0'>
                            {this.state.type.map(item => {
                                return (
                                    <Hand key={item.name} bg='#cef1e1' ba='1 #31ba72' ra='5' w='100' mr='24' my='10' x='center'>
                                        <Text color='#31ba72' pa='10'>{item.name}</Text>
                                    </Hand>
                                )
                            })}
                        </Wrap>

                        {/* 联系方式 */}
                        <Row h='40' y='center' bb='1 #f0f0f0'>
                            <Between>
                                <Hand>
                                    <Text>联系方式</Text>
                                </Hand>
                                <Hand>
                                    <Text>{this.state.phone.substring(0,3) + '****' + this.state.phone.substring(7,11)}</Text>
                                </Hand>
                            </Between>
                        </Row>

                        {/* 留言反馈标题 */}
                        <Row h='40' y='center' >
                            <Text>留言反馈</Text>
                        </Row>

                        {/* 留言多行输入框 */}
                        <View>
                            <TextareaItem
                                placeholder='请输入您的宝贵意见'
                                placeholderTextColor="#c9c9c9"
                                rows={5}
                                style={{fontSize:16,borderWidth:1,borderColor:'#f0f0f0',borderRadius:3}}
                            ></TextareaItem>
                        </View>
                    </View>
                    
                    {/* 反馈提交按钮 */}
                    <View style={{ paddingLeft:10, paddingRight:10, marginTop:20}}>
                        <Button style={{backgroundColor:'#26c75e',borderWidth:0}}><Text color='#fff'>提交</Text></Button>
                    </View>
                   
				</Content>
				
                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <Between px='10'>
                        <TouchOpacity active={0.6} onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </TouchOpacity>
                        <Text size='17'></Text>
                        <Text></Text>
                    </Between>
                </Header>
                {/* 顶部 star */}

				{/* 底部 */}
				<Footer bg='#fff'></Footer>
                
			</Page>
		);
	}
}
